<template>
  <div class="HomeIndex">
    <div class="Index-imgList">
      <!-- <ul class="Index-imgList-ul">
        <li class="Index-imgList-li" v-for="(item) in lbimgList" :key="item.id">
          <img v-lazy="item.url" />
        </li>
      </ul> -->
      <planting :lbimgList="lbimgList"></planting>
    </div>
    <div class="HomeIndex-imgtitle">
      <imgtitle>
        <img src="/img/200.jpg" />
      </imgtitle>
    </div>
    <target></target>
    <div class="HomeIndex-imgtitle">
      <imgtitle>
        <img src="/img/pinpai.jpg" />
      </imgtitle>
    </div>
    <div class="HomeIndexVideo">
      <videobg></videobg>
    </div>
    <div class="HomeIndex-zuopin">
      <div class="HomeIndex-zuopin-left">
        <div class="HomeIndex-zuopin-left-content">
          <div class="HomeIndex-zuopin-left-content-title">
            <imgtitle>
              <img src="/img/zuopin_tit.jpg" />
            </imgtitle>
          </div>
          <ul class="HomeIndex-zuopin-left-content-ul">
            <li
              class="HomeIndex-zuopin-left-content-li"
              v-for="(item, index) in zuopinList"
              @mouseover="()=>{HanderZuopin(index)}"
              :key="item.id"
            >
              <img src="/img/place2.png" alt="三亚" />
              <span>{{item.title}}</span>
              <em>{{item.etitle}}</em>
            </li>
          </ul>
          <div class="HomeIndex-zuopin-left-content-ul-enter_more">
            <img src="/img/enter.jpg" alt />
          </div>
        </div>
      </div>
      <div class="HomeIndex-zuopin-ringht">
        <ul
          style="display: block;"
          v-for="(item, index) in zuopinList"
          :key="item.id"
          v-show="zuopinIsAction==index"
        >
          <li>
            <img :src="item.url" />
          </li>
        </ul>
      </div>
    </div>
    <div class="HomeIndex-imgtitle">
      <imgtitle>
        <img src="/img/jingxuan_title.jpg" />
      </imgtitle>
    </div>
    <div class="HomeIndex-wrapper">
      <div class="HomeIndex-wrapper-content">
        <ul class="HomeIndex-wrapper-content-ul">
          <li class="HomeIndex-wrapper-content-li">
            <div class="HomeIndex-wrapper-content-li-both">
              <el-carousel indicator-position="none">
                <el-carousel-item v-for="item in wrapperList" :key="item.id">
                  <div class="HomeIndex-wrapper-content-li-both-left">
                    <div class="empty">
                      <span>
                        <em>六月•第二季原创客片</em>
                      </span>
                      <img :src="item.url1" />
                      <span class="sp">欣赏更多</span>
                    </div>
                  </div>
                  <div class="HomeIndex-wrapper-content-li-both-ringht">
                    <div class="empty">
                      <span>
                        <em>六月•第二季原创客片</em>
                      </span>
                      <img :src="item.url2" />
                      <span class="sp">欣赏更多</span>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </li>
        </ul>
      </div>
      <img src="/img/20180206101358564.jpg" />
    </div>
    <div class="HomeIndex-imgtitle">
      <imgtitle>
        <img src="/img/star_title.jpg" />
      </imgtitle>
    </div>
    <div class="Index-imgList">
      <ul class="Index-imgList-ul">
        <li class="Index-imgList-li" v-for="(item) in lbimgList" :key="item.id">
          <img v-lazy="item.url" />
        </li>
      </ul>
    </div>
    <div class="wrap_news">
      <div class="wrap_news-title">
        <img src="/img/news_title.jpg" />
      </div>
      <div class="new-list">
        <!-- <a class="next"><img src="/statics/model/images/prev.png" alt=""></a> -->
        <div class="new-content">
          <ul class="news-list-ul">
            <el-carousel indicator-position="outside" arrow="always">
              <el-carousel-item v-for="item in footerList" :key="item.id">
                <li class="news-list-li">
                  <div class="news-list-li-img">
                    <img :src="item.url" alt />
                  </div>
                  <div class="new-list-li-txt">
                    <h2>{{item.title}}</h2>
                    <p>{{item.price}}</p>
                    <span>
                      <em>ONLY TRAVEL PHOTO</em>
                      <em>TIME:2019.04.26</em>
                    </span>
                  </div>
                </li>
              </el-carousel-item>
            </el-carousel>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
  </div>
</template>
<script>
import planting from "../../components/conn/planting";
import imgtitle from "../../components/conn/imgtitle";
import target from "../../components/conn/target";
import videobg from "../../components/conn/videobg";
import {
  getIndexlbimgList,
  getIndexZuopin,
  getIndexWrapper,
  getIndexFooter
} from "../../ajax/index";
export default {
  data() {
    return {
      lbimgList: [],
      zuopinIsAction: 1,
      zuopinList: [],
      wrapperList: [],
      footerList: []
    };
  },
  components: {
    planting,
    imgtitle,
    target,
    videobg
  },
  methods: {
    HanderZuopin(index) {
      this.zuopinIsAction = index;
    },
    getIndexlbimgList() {
      getIndexlbimgList()
        .then(result => {
          if (result.code) {
            this.lbimgList = result.data;
          }
        })
        .catch(err => {});
    },
    getIndexZuopin() {
      getIndexZuopin()
        .then(result => {
          if (result.code) {
            this.zuopinList = result.data;
          }
        })
        .catch(err => {});
    },
    getIndexWrapper() {
      getIndexWrapper()
        .then(result => {
          if (result.code) {
            this.wrapperList = result.data;
          }
        })
        .catch(err => {});
    },
    getIndexFooter() {
      getIndexFooter()
        .then(result => {
          if (result.code) {
            console.log(result)
            this.footerList = result.data;
            console.log(this.footerList);
          }
        })
        .catch(err => {});
    }
  },
  created() {
    this.getIndexlbimgList();
    this.getIndexZuopin();
    this.getIndexWrapper();
    this.getIndexFooter();
  }
};
</script>
<style lang="scss">
.HomeIndex {
  .Index-imgList {
    .Index-imgList-ul {
      .Index-imgList-li {
        font-size: 0px;
      }
    }
  }
  .HomeIndex-imgtitle {
    margin: 60px auto;
  }
  .HomeIndex-zuopin {
    display: flex;
    justify-content: center;
    background-color: #f8f8f8;
    .HomeIndex-zuopin-left {
      width: 50%;
      display: flex;
      justify-content: center;
      .HomeIndex-zuopin-left-content {
        width: 460px;

        .HomeIndex-zuopin-left-content-title {
          padding-top: 74px;
        }
        .HomeIndex-zuopin-left-content-ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          padding-top: 38px;
          .HomeIndex-zuopin-left-content-li {
            width: 33%;
            /* display: flex; */
            text-align: center;
            /* justify-content: center; */
            img {
              width: 21px;
              height: 30px;
            }
            text-decoration: none;
            color: #101010;
            text-align: center;
            padding-bottom: 56px;
            cursor: pointer;
            span {
              width: 100%;
              display: block;
            }
            em {
              width: 100%;
              display: block;
              font-size: 12px;
              color: #898989;
            }
          }
        }
        .HomeIndex-zuopin-left-content-ul-enter_more {
          text-align: center;
          width: 75%;
        }
      }
    }
    .HomeIndex-zuopin-ringht {
      height: 100%;
      font-size: 0px;
      margin-top: 5px;
      width: 50%;
      ul {
        height: 100%;
        li {
          height: 100%;
        }
      }
    }
  }
  .HomeIndex-wrapper {
    .HomeIndex-wrapper-content {
      margin-bottom: 70px;
      .HomeIndex-wrapper-content-ul {
        .HomeIndex-wrapper-content-li {
          .HomeIndex-wrapper-content-li-both {
            .el-carousel {
              width: 100%;
              .el-carousel__container {
                width: 100%;
                height: 650px;
                .el-carousel__item {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: space-between;
                  .HomeIndex-wrapper-content-li-both-left {
                    width: 50%;
                    .empty {
                      width: 100%;
                      height: 650px;
                      position: relative;
                      span {
                        font-size: 24px;
                        line-height: 50px;
                        text-align: center;
                        display: block;
                        width: 100%;
                        height: 50px;
                        overflow: hidden;
                        position: absolute;
                        top: 0;
                        z-index: 8;
                        color: #1a1a1a;
                        em {
                          color: #ff283c;
                        }
                      }
                      img {
                        display: block;
                        position: absolute;
                        top: 66px;
                        left: 0;
                        z-index: 10;
                        height: auto;
                        width: 100%;
                      }
                      span.sp {
                        top: auto;
                        bottom: 0px;
                        width: 186px;
                        height: 38px;
                        line-height: 38px;
                        color: #fff;
                        background: #1a1a1a;
                        left: 50%;
                        margin-left: -93px;
                        font-size: 16px;
                      }
                    }
                  }
                  .HomeIndex-wrapper-content-li-both-ringht {
                    width: 50%;
                    .empty {
                      width: 100%;
                      height: 650px;
                      position: relative;
                      span {
                        font-size: 24px;
                        line-height: 50px;
                        text-align: center;
                        display: block;
                        width: 100%;
                        height: 50px;
                        overflow: hidden;
                        position: absolute;
                        top: 0;
                        z-index: 8;
                        color: #1a1a1a;
                        em {
                          color: #ff283c;
                        }
                      }
                      img {
                        width: 100%;
                        display: block;
                        position: absolute;
                        top: 66px;
                        left: 0;
                        z-index: 10;
                        height: auto;
                      }
                      span.sp {
                        top: auto;
                        bottom: 0;
                        width: 186px;
                        height: 38px;
                        line-height: 38px;
                        color: #fff;
                        background: #1a1a1a;
                        left: 50%;
                        margin-left: -93px;
                        font-size: 16px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .wrap_news {
    overflow: hidden;
    height: 770px;
    background: #1a1a1a url(/img/n_bottom.jpg) no-repeat center 676px;
    .wrap_news-title {
      text-align: center;
      overflow: hidden;
      padding: 66px 0 58px 0;
      width: 100%;
      img {
        width: 100%;
        max-width: 1920px;
      }
    }
    .new-content {
      margin: 0px auto;
      width: 810px;
      .news-list-ul {
        display: flex;
        justify-content: center;
        overflow-x: hidden;
        flex-wrap: wrap;
        .el-carousel {
          margin: 0px 40px;
          &.el-carousel--horizontal {
            overflow-x: visible;
          }
          width: 270px;
          height: 500px;
          .el-carousel__container {
            width: 1170px;
            height: 460px;

            .el-carousel__arrow {
              position: fixed;
              display: none;
              &.el-carousel__arrow--left {
                left: 300px;
              }
              &.el-carousel__arrow--right {
                right: 300px;
              }
            }
            .el-carousel__item {
              width: 270px;
              height: 460px;
              .news-list-li {
                margin-right: 28px;
                overflow: hidden;
                text-align: center;
                width: 250px;
                height: 446px;
                position: relative;
                background-color: #fff;
                .new-list-li-txt {
                  p {
                    padding-top: 10px;
                    color: #838383;
                    text-align: left;
                    padding: 20px;
                    padding-bottom: 0;
                  }
                  h2 {
                    font-size: 18px;
                    color: #4f4f4f;
                    font-weight: normal;
                    padding: 20px;
                    padding-bottom: 0;
                    text-align: left;
                  }
                  span {
                    width: 100%;
                    position: absolute;
                    color: #838383;
                    bottom: 0;
                    left: 0;
                    height: 42px;
                    line-height: 42px;
                    font-size: 12px;
                    border-top: solid 1px #eae3db;
                  }
                }
                .news-list-li-img {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>